<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>line</title>
    <!-- 引入echarts外联，所以不需要安装echarts-->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.2.1/echarts.js"></script> -->
    <script src="./js/echarts.js"></script>
    <style>
      body {
        background: #2c2c2c;
      }
    </style>
  </head>
  <body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div
      id="main1"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>
    <div
      id="main2"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main3"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main4"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main5"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main6"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <div
      id="main7"
      style="width: 443px; height: 231px; float: left; margin: 20px 10px 0"
    ></div>

    <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById("main1"));

      var lineData1 = {
        xAxis: ["万宁市", "三亚市", "文昌市", "琼海市"],
        series: [3000, 4800, 3200, 1840, 3800],
        unit: "张",
      };
      // 指定图表的配置项和数据
      var option1 = {
        grid: {
          left: 10,
          right: 25,
          bottom: 8,
          top: 50,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          transitionDuration: 0,
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        xAxis: {
          data: lineData1.xAxis,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(32,76,99,0.87)",
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          name: lineData1.unit,
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: "#fff",
            fontSize: 12,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(32,76,99,0.87)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(32,76,99,0.2)",
            },
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                color: "#29A3FF",
                lineStyle: {
                  color: "#29A3FF",
                  width: 2,
                },
              },
            },
            areaStyle: {
              opacity: 0.23,
              color: "#29A3FF",
            },
            smooth: true,
            type: "line",
            data: lineData1.series,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
            markPoint: {
              data: [{ type: "max", name: "Max" }],
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);

      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(document.getElementById("main2"));

      var lineData2 = [
        {
          year: "2016",
          value: 120,
        },
        {
          year: "2017",
          value: 130,
        },
        {
          year: "2018",
          value: 155,
        },
        {
          year: "2019",
          value: 190,
        },
        {
          year: "2020",
          value: 230,
        },
        {
          year: "2021",
          value: 280,
        },
        {
          year: "2022",
          value: 370,
        },
      ];
      let xData = [];
      let yData = [];
      for (let i = 0; i < lineData2.length; i++) {
        xData.push(lineData2[i].year);
        yData.push(lineData2[i].value);
      }
      var option2 = {
        color: ["#ADFAFF"], // 线的颜色
        tooltip: {
          // 设置提升效果
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "10%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          axisLabel: {
            // interval:0,
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 10,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#C9CACA",
            },
          },
          data: xData,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
        },
        series: [
          {
            smooth: true, // 是否曲线
            name: "",
            type: "line",
            data: yData,
            areaStyle: {
              color: {
                type: "linear",
                x: 0, //右
                y: 0, //下
                x2: 0, //左
                y2: 1, //上
                colorStops: [
                  {
                    offset: 0.1,
                    color: "#ADFAFF", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#ADFAFF00", // 100% 处的颜色
                  },
                ],
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option2);

      var myChart3 = echarts.init(document.getElementById("main3"));

      var lineData3 = {
        dataXY: [12, 45, 12, 76, 43, 34],
        dataCB: [45, 23, 54, 23, 67, 23],
        dataYears: [2018, 2019, 2020, 2021, 2022, 2023],
      };

      var option3 = {
        tooltip: {
          trigger: "axis",
        },
        color: ["#fcba62", "#69f0ff"],
        legend: {
          icon: "circle",
          top: "3%",
          left: "left",
          itemWidth: 8,
          textStyle: {
            color: "#68a9ff",
            fontSize: 12,
            padding: [0, 0, 0, 0],
          },
        },
        grid: {
          top: "22%",
          left: "10%",
          right: "5%",
          bottom: "15%",
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#425b78",
              },
            },
            axisLabel: {
              color: "#b9bec6",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: lineData3.dataYears,
          },
        ],

        yAxis: [
          {
            type: "value",
            nameTextStyle: {
              color: "#b9bec6",
              fontSize: 12,
            },
            axisLine: {
              lineStyle: {
                color: "#425b78",
                fontSize: 14,
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#587485",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#b9bec6",
              },
            },
          },
        ],
        series: [
          {
            name: "效益",
            type: "line",
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#fcba62",
              },
            },
            data: lineData3.dataXY, //data.values
          },
          {
            name: "成本",
            type: "line",
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#69f0ff",
              },
            },
            data: lineData3.dataCB, //data.values
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option3);

      // 基于准备好的dom，初始化echarts实例
      var myChart4 = echarts.init(document.getElementById("main4"));

      var lineData4 = [
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 2,
          yearMonth: "2022-02",
          stock: 22,
          shipment: 9,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 3,
          yearMonth: "2022-03",
          stock: 26,
          shipment: 10,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 4,
          yearMonth: "2022-04",
          stock: 23,
          shipment: 9,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 5,
          yearMonth: "2022-05",
          stock: 25,
          shipment: 10,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 6,
          yearMonth: "2022-06",
          stock: 21,
          shipment: 9,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 7,
          yearMonth: "2022-07",
          stock: 25,
          shipment: 7,
          status: "0",
          delFlag: "0",
        },
      ];

      var xData2 = lineData4.map((item) => item.yearMonth);
      var shipment = lineData4.map((item) => item.shipment);
      var stock = lineData4.map((item) => item.stock);

      var option4 = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          itemWidth: 14,
          itemHeight: 14,
          icon: "roundRect",
          right: 15,
          top: 0,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "5%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData2,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 14,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#2B79AF",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#B0D0E7",
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#2B79AF",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "畜种出栏情况",
            type: "line",
            stack: "Total",
            symbolSize: 5,
            symbol: "circle",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(169, 125, 49, 0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 225, 174, 0)",
                  },
                ],
              },
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#B78D45",
                },
                color: "#B78D45", //拐点颜色
              },
            },
            data: shipment,
          },
          {
            name: "畜种存栏情况",
            type: "line",
            stack: "Total",
            symbolSize: 5,
            symbol: "circle",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(4, 205, 244, 0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(4, 205, 244, 0)",
                  },
                ],
              },
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#04CDF4",
                },
                color: "#04CDF4", //拐点颜色
              },
            },
            data: stock,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart4.setOption(option4);

      // 基于准备好的dom，初始化echarts实例
      var myChart5 = echarts.init(document.getElementById("main5"));

      var lineData5 = [
        {
          yearMonth: "2023-02",
          handleNum: 214,
        },
        {
          yearMonth: "2023-03",
          handleNum: 633,
        },
        {
          yearMonth: "2023-04",
          handleNum: 521,
        },
        {
          yearMonth: "2023-05",
          handleNum: 835,
        },
        {
          yearMonth: "2023-06",
          handleNum: 731,
        },
        {
          yearMonth: "2023-07",
          handleNum: 336,
        },
      ];
      var xData5 = lineData5.map((item) => item.yearMonth);
      var yData5 = lineData5.map((item) => item.handleNum);
      var option5 = {
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "5%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData5,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 14,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#2B79AF",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#2B79AF",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(72, 197, 246, 0.3)",
              type: "dashed",
            },
          },
        },
        series: [
          {
            name: "",
            type: "line",
            stack: "Total",
            symbolSize: 6,
            symbol: "circle",
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(4, 205, 244, 1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(16, 62, 63, 0.2)",
                  },
                ],
              },
            },
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#04CDF4",
                },
                color: "#53DCE2", //拐点颜色
              },
            },
            data: yData5,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart5.setOption(option5);

      // 基于准备好的dom，初始化echarts实例
      var myChart6 = echarts.init(document.getElementById("main6"));

      var lineData6 = [
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 2,
          yearMonth: "2022-02",
          stock: 22,
          shipment: 9,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 3,
          yearMonth: "2022-03",
          stock: 26,
          shipment: 10,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 4,
          yearMonth: "2022-04",
          stock: 23,
          shipment: 9,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 5,
          yearMonth: "2022-05",
          stock: 25,
          shipment: 10,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 6,
          yearMonth: "2022-06",
          stock: 21,
          shipment: 9,
          status: "0",
          delFlag: "0",
        },
        {
          createBy: "",
          createTime: "2023-07-19 14:51:44",
          updateBy: "",
          updateTime: "2023-07-19 14:51:45",
          remark: null,
          id: 7,
          yearMonth: "2022-07",
          stock: 25,
          shipment: 7,
          status: "0",
          delFlag: "0",
        },
      ];

      var xData6 = lineData6.map((item) => item.yearMonth);
      var shipment = lineData6.map((item) => item.shipment);
      var stock = lineData6.map((item) => item.stock);

      var option6 = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          itemWidth: 14,
          itemHeight: 14,
          icon: "roundRect",
          right: 15,
          top: 0,
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          left: "2%",
          right: "5%",
          bottom: "5%",
          top: "8%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xData2,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 14,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#2B79AF",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#B0D0E7",
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",

              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#2B79AF",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "畜种出栏情况",
            type: "line",
            smooth: true, // 这里设置为true，使得线条变得圆滑
            stack: "Total",
            symbolSize: 5,
            symbol: "circle",

            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#B78D45",
                },
                color: "#B78D45", //拐点颜色
              },
            },
            data: shipment,
          },
          {
            name: "畜种存栏情况",
            type: "line",
            stack: "Total",
            smooth: true, // 这里设置为true，使得线条变得圆滑
            symbolSize: 5,
            symbol: "circle",

            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2,
                  color: "#04CDF4",
                },
                color: "#04CDF4", //拐点颜色
              },
            },
            data: stock,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart6.setOption(option6);

      // 基于准备好的dom，初始化echarts实例
      var myChart7 = echarts.init(document.getElementById("main7"));

      var option7 = {
        color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],

        legend: {
          itemWidth: 14,
          itemHeight: 14,
          icon: "roundRect",
          right: 15,
          top: 0,
          textStyle: {
            color: "#fff",
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],

            axisLabel: {
              color: "#fff",
              fontSize: 12,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(32,76,99,0.87)",
              },
            },
          },
        ],

        yAxis: {
          type: "value",
          axisLabel: {
            color: "#fff",
          },
        },

        series: [
          {
            name: "Line 1",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(128, 255, 165)",
                },
                {
                  offset: 1,
                  color: "rgb(1, 191, 236)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [140, 232, 101, 264, 90, 340, 250],
          },
          {
            name: "Line 2",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(0, 221, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(77, 119, 255)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 282, 111, 234, 220, 340, 310],
          },
          {
            name: "Line 3",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(55, 162, 255)",
                },
                {
                  offset: 1,
                  color: "rgb(116, 21, 219)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [320, 132, 201, 334, 190, 130, 220],
          },
          {
            name: "Line 4",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 0, 135)",
                },
                {
                  offset: 1,
                  color: "rgb(135, 0, 157)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 402, 231, 134, 190, 230, 120],
          },
          {
            name: "Line 5",
            type: "line",
            stack: "Total",
            smooth: true,
            lineStyle: {
              width: 0,
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgb(255, 191, 0)",
                },
                {
                  offset: 1,
                  color: "rgb(224, 62, 76)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [220, 302, 181, 234, 210, 290, 150],
          },
        ],
      }; // 使用刚指定的配置项和数据显示图表。
      myChart7.setOption(option7);
    </script>
  </body>
</html>
